<template>
  <div>
    <div style="height: 70px;border: 1px solid red;">
      <div><img src="/img/bg/pxx.png" style="padding-left: 50px;height: 80px;width: 200px"></div>
      <div style="margin-top: -5.5%;padding-left: 23%">
        <el-button type="text" style="padding-top: 2.5%">默认按钮</el-button>
        <el-button type="text" style="padding-left: 5%">默认按钮</el-button>
        <el-button type="text" style="padding-left: 5%">默认按钮</el-button>
        <el-button type="text" style="padding-left: 5%">默认按钮</el-button>
        <el-button type="text" style="padding-left: 5%">默认按钮</el-button>
        <el-button type="text" style="padding-left: 5%">默认按钮</el-button>
        <el-button type="text" style="padding-left: 5%">默认按钮</el-button>
        <el-button type="text" style="padding-left: 5%">默认按钮</el-button>
      </div>
    </div>
    <el-row>
      <el-col style="margin-top:3%;margin-left: 14% " :span="17">
        <el-card>
          <el-image
            style="width: 300px; height: 300px;"
            :src="shopdata.commodityImg"
            :preview-src-list="srcList">
          </el-image>
          <div style="margin-left: 36%;margin-top: -35%;width: 300px;height: 300px">
            <h4>{{shopdata.commodityName}}</h4>
            <h4>{{shopdata.commodityIntroduce}}</h4>
            价格<span style="font-size: 25px;color: red">￥{{shopdata.priceRange}}</span>
            <p>地区：{{shopdata.address}}</p>
            <el-radio-group v-for="item in options" :key="item" v-model="form.informantType" size="mini"
                            @change="aaa(item.label)">
              <el-radio-button
                style="margin-right: 10px;margin-top: 10px"
                :value="item.value"
                :label="item.value"
              >{{item.value}}
              </el-radio-button>
            </el-radio-group>
            <el-col style="margin-top: 10px">
              <el-row>
                <el-button type="danger" plain @click="buy">立即购买</el-button>
                <el-button type="danger" icon="el-icon-shopping-cart-2" @click="cart">加入购物车</el-button>
              </el-row>
            </el-col>
          </div>
          <div style="margin-left: 75%;margin-top: -35%;width: 200px;
              height: 300px;">
            <img style="margin:0 auto;width: 100px; height: 100px;border-radius:50%"
                 :src="storeData.img"
                 class="image">
            <h4>商店：{{storeData.storeName}}</h4>
            <h4 v-if="storeData.score===''">评分：未评分</h4>
            <h4 v-if="storeData.score!==''">评分：{{storeData.score}}</h4>
            <el-row>
              <template>
                <el-tooltip class="item" effect="dark" content="点我进行聊天" placement="top">
                  <el-button icon="el-icon-loading" circle @click="openDialogChat"/>
                </el-tooltip>
              </template>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <el-col style="margin-top:3%;margin-left: 14% " :span="17">
        <el-tabs type="border-card" v-model="activeName" @tab-click="activeData">
          <el-tab-pane label="商品信息" name="first">
            <el-row :gutter="12">
              <el-col :span="24">
                <el-card shadow="always">
                  <div style="width:80%;margin: 0 auto">
                    店铺名称:<span style="margin-left: 30px">{{shopdata.storeName}}</span><br><br>
                    <span style="font-weight: bold">信息:</span><br>
                    商品名称:<span style="margin-left: 15px">{{shopdata.commodityName}}</span><br>
                    规格参数:<span style="margin-left: 15px">{{shopdata.specs}}</span>
                    <el-button type="text" style="margin-left: 5%" icon="el-icon-caret-right" @click="more">更多详细参数
                    </el-button>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :span="24">
                <el-card shadow="always">
                  <div style="width: 80%;margin: 10px auto">
                    <el-image style="width: 100%" v-for="url in urls" :key="url" :src="url"/>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="详细规格" name="second">
            <el-row :gutter="12">
              <el-col :span="24">
                <el-card shadow="always">
                  <span style="font-size: 15px">工艺/流行</span><br><br>
                  <table class="mailTable" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="column">图案</td>
                      <td>{{commodityParams.pattern}}</td>
                    </tr>
                    <tr>
                      <td class="column">细分风格</td>
                      <td>{{commodityParams.subdivisionStyle}}</td>
                    </tr>
                    <tr>
                      <td class="column">服饰工艺</td>
                      <td>{{commodityParams.technology}}</td>
                    </tr>
                  </table>
                </el-card>
              </el-col>
              <el-col :span="24">
                <el-card shadow="always">
                  <span style="font-size: 15px">关键信息</span>
                  <table class="mailTable" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="column">面料分类</td>
                      <td>{{commodityParams.fabrics}}</td>
                    </tr>
                    <tr>
                      <td class="column">基础风格</td>
                      <td>{{commodityParams.basic}}</td>
                    </tr>
                    <tr>
                      <td class="column">上市年份季节</td>
                      <td>{{commodityParams.thickness}}</td>
                    </tr>
                    <tr>
                      <td class="column">服饰工艺</td>
                      <td>{{commodityParams.technology}}</td>
                    </tr>
                    <tr>
                      <td class="column">销售渠道类型</td>
                      <td>{{commodityParams.channel}}</td>
                    </tr>
                    <tr>
                      <td class="column">材质成分</td>
                      <td>{{commodityParams.material}}</td>
                    </tr>
                  </table>
                </el-card>
              </el-col>
              <el-col :span="24">
                <el-card shadow="always">
                  <span style="font-size: 15px">其他</span>
                  <table class="mailTable" cellspacing="0" cellpadding="0">
                    <tr>
                      <td class="column">适用场景</td>
                      <td>{{commodityParams.scene}}</td>
                    </tr>
                    <tr>
                      <td class="column">适用对象</td>
                      <td>{{commodityParams.objects}}</td>
                    </tr>
                  </table>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="累计评价" name="third">
            <el-row>
              <el-col :span="24" v-for="(evaluate, index) in evaluate" :key="index">
                <el-card :body-style="{ padding: '0px' }">
                  <span style="padding-left: 10px">{{evaluate.userName}}</span>
                  <el-divider direction="vertical"/>
                  <span>{{evaluate.specs}}</span>
                  <el-divider direction="vertical"/>
                  <span>发布于 {{evaluate.createTime}}</span><br>
                  <span style="padding-left: 10px">{{evaluate.content}}</span><br>
                  <el-image style="padding-top: 10px;width: 100px;height: 100px;padding-left: 10px"
                            v-for="url in evaluate.img.split(',')" :key="url"
                            :src="url"
                            :preview-src-list="evaluate.img.split(',')">
                  </el-image>
                  <el-divider></el-divider>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleClose">
      <el-card :body-style="{ padding: '0px' }">
        <img style="width: 200px;height: 200px" :src="buyData.commodityImg" class="image">
        <div style="padding: 14px;">
          商品名称：<span>{{buyData.commodityName}}</span><br>
          商品价格：<span>{{buyData.commodityPrice}}</span><br>
          商品规格：<span>{{buyData.specs}}</span>
        </div>
      </el-card>
      <span>未开发支付功能，仅供测试使用。</span>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="buyOK">支付测试</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="聊天窗口"
      :visible.sync="dialogChat"
      width="50%"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-row>
        <el-col :span="24" >
          <el-card :body-style="{ padding: '0px' }">
            <div v-if="this.message.length!==0">
            <div v-for="msg in this.message" :key="msg" class="text item">
              <div v-if="msg.sendId!==userInfo.userId">
                <img style="width: 40px; height: 40px;border-radius:50%"
                     :src="msg.sendImg">
                <template>
                  <el-popover
                    placement="top-start"
                    title="已收"
                    width="100"
                    trigger="hover">
                    {{msg.msg}}
                    <el-button slot="reference">{{msg.msg.substr(0,6)}}</el-button>
                  </el-popover>
                </template>
              </div>
              <div v-if="msg.sendId===userInfo.userId"
                   style="width: 200px;height: 60px;margin-left: 70%">
                <template>
                  <el-popover
                    placement="top-start"
                    title="已发"
                    width="100"
                    trigger="hover">
                    {{msg.msg}}
                    <el-button slot="reference">{{msg.msg.substr(0,6)}}</el-button>
                  </el-popover>
                </template>
                <img style="width: 40px; height: 40px;border-radius:50%"
                     :src="userInfo.avatar">
              </div>
            </div>
            </div>
          </el-card>
        </el-col>
        <el-col>
          <el-input
            type="textarea"
            maxlength="50"
            show-word-limit
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogChat = false">取 消</el-button>
    <el-button type="primary" @click="send">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>
<script>
  import {mapGetters} from "vuex";
  import {add} from "@/api/cart/cart";
  import {getCommodityDetail} from "@/api/commodity/commodity";
  import {getStoreDetail} from "@/api/store/store";
  import {sendOneWebSocket,sendChatWebSocket} from "@/api/websocket";
  import {commodityId} from "@/api/params/commodityparams";
  import {evaluateList} from "@/api/evaluate/evaluate";
  import {validate} from "@/util/validate";

  export default {
    name: "commodityview",
    data() {
      return {
        dialogVisible: false,
        dialogChat:false,
        textarea:'',
        message:[],
        CommodityIdDetail: '',
        price: '',
        activeName: 'first',
        form: {
          informantType: "",
        },
        options: [],
        shopdata: '',
        commodityParams: '',
        urls: [],
        srcList: [],
        cId: '',
        storeData: '',
        buyData: '',
        evaluate: [],
      };
    },
    mounted() {
      this.cId = this.$route.query.data;
      this.getCommodityData();
      // WebSocket
      if ('WebSocket' in window) {
        this.websocket = new WebSocket('ws://localhost:7777/websocket/' + this.userInfo.userId)
        this.initWebSocket()
      } else {
        alert('当前浏览器不支持!')
      }
    },

    beforeDestroy () {
      this.onbeforeunload()
    },
    computed: {
      ...mapGetters([
        "userInfo",
      ])
    },
    methods: {
      openDialogChat(){
        this.dialogChat = true
      },
      send(){
        if (validate(this.textarea)){
          const row = this.storeData;
          const messageDTO = {
            receiveId: row.createUser,
            sendId: this.userInfo.userId,
            sendImg:this.userInfo.avatar,
            msg: this.textarea
          };
          sendChatWebSocket(messageDTO).then(() => {
            this.message.push(messageDTO)
          });
        }else {
          this.$message.error('不能发空信息哦!');
        }
        this.textarea = ''
      },

      initWebSocket () {
        // 连接错误
        this.websocket.onerror = this.setErrorMessage
        // 连接成功
        this.websocket.onopen = this.setOnopenMessage

        // 收到消息的回调
        this.websocket.onmessage = this.setOnmessageMessage

        // 连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage

        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage () {
        console.log('WebSocket连接发生错误 状态码：' + this.websocket.readyState)
      },
      setOnopenMessage () {
        console.log(this.userInfo.userName+'WebSocket连接成功    状态码：' + this.websocket.readyState)
      },
      setOnmessageMessage (event) {
        const datas = JSON.parse(event.data);
        this.message.push(datas)
      },
      setOncloseMessage () {
        console.log(this.userInfo.userName+'WebSocket连接关闭    状态码：' + this.websocket.readyState)
      },
      onbeforeunload () {
        this.closeWebSocket()
      },
      closeWebSocket () {
        this.websocket.close()
      },
      setCollapse() {
        this.$store.commit("SET_COLLAPSE");
      },
      setScreen() {
        this.$store.commit("SET_FULLSCREN");
      },

      activeData() {
        if (this.activeName === 'second') {
          commodityId(this.cId).then((res) => {
            this.commodityParams = res.data.data
          });
        }
        if (this.activeName === 'third') {
          evaluateList(this.cId).then((res) => {
            this.evaluate = res.data.data
          });
        }
      },
      more() {
        this.activeName = 'second';
      },
      getCommodityData() {
        getCommodityDetail(this.cId).then(res => {
          this.shopdata = res.data.data;
          this.options = this.shopdata.specsList;
          const picture = this.shopdata.commodityPicture;
          this.urls = picture.split(",");
          this.srcList.push(this.shopdata.commodityImg);
          var storeId = this.shopdata.createUser;
          getStoreDetail(storeId).then(res => {
            this.storeData = res.data.data
          });
        });
      },
      aaa(index) {
        this.shopdata.priceRange = this.shopdata.priceList[index],
          this.price = this.shopdata.priceList[index]
      },
      buy() {
        if (this.form.informantType === '') {
          this.$message.error("请选择商品规格!");
          return
        }
        this.dialogVisible = true
        var row = {
          specs: this.form.informantType,
          storeId: this.shopdata.createUser,
          commodityName: this.shopdata.commodityName,
          commodityPrice: this.price,
          commodityImg: this.shopdata.commodityImg,
          commodityPicture: this.shopdata.commodityPicture,
          storeName: this.shopdata.storeName,
          commodityId: this.cId,
          status: '3'
        }
        this.buyData = row;
      },
      buyOK() {
        var row = this.buyData
        const messageDTO = {
          receiveId: row.storeId,
          type: '订单推送',
          msg: '您有一个新的订单!'
        };
        add(row).then(() => {
          this.$message({
            type: "success",
            message: "购买成功!"
          });
        }, error => {
          window.console.log(error);
        });
        sendOneWebSocket(messageDTO).then(() => {
        });
        this.dialogVisible = false
      },
      cart() {
        if (this.form.informantType === '') {
          this.$message.error("请选择商品规格!");
          return
        }
        var row = {
          specs: this.form.informantType,
          commodityName: this.shopdata.commodityName,
          commodityPicture: this.shopdata.commodityPicture,
          commodityImg: this.shopdata.commodityImg,
          commodityPrice: this.price,
          storeName: this.shopdata.storeName,
          storeId: this.shopdata.createUser,
          commodityId: this.cId,
        }
        add(row).then(() => {
          this.$message({
            type: "success",
            message: "加入购物车成功!"
          });
        }, error => {
          window.console.log(error);
        });
      },
    }
  };
</script>

<style scoped="scoped" lang="scss">
  .mailTable {
    width: 100%;
    border-top: 1px solid #E6EAEE;
    border-left: 1px solid #E6EAEE;
  }

  .mailTable tr td {
    width: 200px;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    padding: 0 10px;
    border-bottom: 1px solid #E6EAEE;
    border-right: 1px solid #E6EAEE;
  }

  .mailTable tr td.column {
    background-color: #EFF3F6;
    color: #393C3E;
    width: 30%;
  }
</style>
